<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="order by dede58.com" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../static/css/pace.css" rel="stylesheet">
    <link href="../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="../../static/css/metismenu.min.css" rel="stylesheet">
    <!--template css-->
    <link href="../../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../static/js/html5shiv.min.js"></script>
    <script src="../../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--top bar start-->
<div class="top-bar light-top-bar"><!--by default top bar is dark, add .light-top-bar class to make it light-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">
                <a class="admin-logo" href="index.html">
                    <h1><img alt="" src="../../static/picture/logo-dark.png"></h1>
                </a>
                <div class="left-nav-toggle visible-xs visible-sm">
                    <a href="">
                        <i class="glyphicon glyphicon-menu-hamburger"></i>
                    </a>
                </div><!--end nav toggle icon-->
                <!--start search form-->
                <div class="search-form hidden-xs">
                    <form>
                        <input class="form-control" placeholder="Search for..." type="text">
                        <button class="btn-search" type="button"><i class="fa fa-search"></i></button>
                    </form>
                </div>
                <!--end search form-->
            </div>
            <div class="col-xs-6">
                <ul class="list-inline top-right-nav">
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-envelope"></i>
                            <span class="badge badge-warning">4</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a class="pull-right text-muted" href="#"><small>View
                                    All</small></a> Messages
                                </div>
                                <div class="scrollDiv">

                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-2.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">John Doe <label
                                                    class="label label-primary pull-right">Office</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-3.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Emily Doe  <label
                                                    class="label label-info pull-right">Marketing</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-4.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Michael Clark <label
                                                    class="label label-warning pull-right">Support</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-5.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Ronaldo <label
                                                    class="label label-success pull-right">Metting</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-bell"></i>
                            <span class="badge badge-danger">6</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a class="pull-right text-muted" href="#"><small>View
                                    All</small></a> Notifications
                                </div>
                                <div class="scrollDiv">
                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-cloud-upload text-primary"></i></span>
                                            <span class="notification-title">Upload Complete</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-info text-warning"></i></span>
                                            <span class="notification-title">Storage Space low</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-check text-success"></i></span>
                                            <span class="notification-title">Project Task Complete </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="right-sidebar-toggle" href="javascript: void(0);"><i
                                class="glyphicon glyphicon-align-right"></i></a>
                    </li>
                    <li class="dropdown avtar-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <img alt="" class="img-circle" src="../../static/picture/avtar-1.jpg" width="30">

                        </a>
                        <ul class="dropdown-menu top-dropdown">
                            <li><a href="javascript: void(0);"><i class="icon-bell"></i> Activities</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-user"></i> Profile</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-settings"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="javascript: void(0);"><i class="icon-logout"></i> Logout</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>
<!-- top bar end-->

<!--right side bar panel-->
<nav class="right_sidebar" id="right-sidebar-toggle">
    <div class="nano">
        <div class="nano-content">
            <div>
                <!-- Nav tabs -->
                <ul class="list-inline nav-tab-panel clearfix" role="tablist">
                    <li class="active" role="presentation"><a aria-controls="projects" data-toggle="tab"
                                                              href="#projects"
                                                              role="tab">Projects</a></li>
                    <li role="presentation"><a aria-controls="contacts" data-toggle="tab" href="#contacts" role="tab">Contacts</a>
                    </li>

                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="projects" role="tabpanel">
                        <ul class="sidebar-list">
                            <li class="sidebar-title">
                                <h3 class="font-100"> Current projects</h3>
                                <small>There are <strong>7</strong> Current project</small>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning" style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Company</span>
                                    <h4>Website Re-design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 84%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-success" style="width: 84%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Metting</span>
                                    <h4>Business Consultancy</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 54%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-info" style="width: 54%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning" style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="contacts" role="tabpanel">

                        <ul class="list-unstyled sidebar-contact-list">
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-1.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-2.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>John doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-danger circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-3.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Eluga Smith</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-4.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Jonathan Doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-5.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li>
                                <div class=" text-center">
                                    <!-- Optional link to list more users-->
                                    <a class="btn btn-teal" href="javascript:void(0);" title="See more contacts">
                                        Load more..
                                    </a>
                                </div>
                            </li>
                        </ul><!--end sidebar contacts-list-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>
<!--end right side bar panel-->

<!--left navigation start-->
<aside class="float-navigation light-navigation">
    <div class="nano">
        <div class="nano-content">
            <ul class="metisMenu nav" id="menu">
                <li class="nav-heading"><span>Main Navigation</span></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-home"></i> Dashboard <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="index.html">Dashboard Alpha</a></li>
                        <li><a href="index-beta.html">Dashboard beta</a></li>

                    </ul>
                </li>
                <li><a href="widgets.html"><i class="fa fa-diamond"></i> Widgets </a></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-handbag"></i> E-commerce <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="ecommerce-dashboard.jsp">Dashboard</a></li>
                        <li><a href="ecommerce-products.jsp">products</a></li>
                        <li><a href="ecommerce-orders.jsp">orders</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-envelope-letter"></i> Mail <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="mail-index.html">Inbox</a></li>
                        <li><a href="mail-view.html">Inbox view</a></li>
                        <li><a href="mail-compose.html">Compose</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-grid"></i> Layouts <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="layout-sidebar-topbar-dark.html">Sidebar +Topbar Dark</a></li>
                        <li><a href="layout-sidebar-colored.html">Sidebar Colored</a></li>
                        <li><a href="layout-horizontal.html">Horizontal</a></li>

                        <li><a href="layout-dashboard-only.html">Dashboard Only</a></li>
                    </ul>
                </li>
                <li class="nav-heading"><span>Components</span></li>
                <li><a href="jquery-ui-elements.html"><i class="icon-wrench"></i> Jquery UI Elements</a></li>
                <li class="active">
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-settings"></i> UI elements <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="false" class="nav-second-level nav">
                        <li><a href="ui-typography.html">Typography</a></li>
                        <li><a href="ui-icons.html">Icons</a></li>
                        <li><a href="ui-panels.html">Panels</a></li>
                        <li><a href="ui-buttons.html">Buttons</a></li>
                        <li><a href="ui-tabs.html">tabs</a></li>
                        <li><a href="ui-tip-pop.html">Tooltip & Popovers</a></li>
                        <li><a href="ui-alerts.html">Alerts</a></li>
                        <li><a href="ui-modals.html">modals</a></li>
                        <li><a href="ui-grid.html">grid system</a></li>
                        <li><a href="ui-carousel.html">Carousel</a></li>
                        <li><a href="ui-sweetalerts.html">Sweet alters</a></li>
                        <li><a href="ui-alertify.html">Alertify Alters</a></li>
                        <li><a href="ui-sliders.html">Sliders</a></li>
                        <li><a href="ui-nestable.html">Nestable</a></li>
                        <li><a href="ui-date-time-picker.html">Date time pickers</a></li>
                        <li><a href="ui-treeview.html">Tree view</a></li>
                        <li><a href="ui-draggable-panels.html">Draggable Panels</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-pencil"></i> Forms <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="form-basic.html">Basic elements</a></li>
                        <li><a href="form-file-upload.html">File upload</a></li>
                        <li><a href="form-editor.html">text editor</a></li>
                        <li><a href="form-wizard.html">Form Wizard</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-bar-chart"></i> Charts <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="chart-flot.html">Flot</a></li>
                        <li><a href="chart-morris.html">Morris</a></li>
                        <li><a href="chart-radial.html">Radial</a></li>
                        <li><a href="chart-c3.html">C3</a></li>
                        <li><a href="chart-sparkline.html">Sparkline</a></li>
                        <li><a href="chart-rickshaw.html">rickshaw</a></li>
                        <li><a href="chart-chartjs.html">ChartJs</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-list"></i> Tables <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="table-basic.html">Basic tables</a></li>
                        <li><a href="table-data.html">Data tables</a></li>
                        <li><a href="table-foo.html">Foo tables</a></li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-map"></i> Maps <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="map-vector.html">Vector map</a></li>
                        <li><a href="map-google.html">Google map</a></li>
                    </ul>
                </li>
                <li class="nav-heading"><span>More</span></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-folder"></i> Pages <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="page-empty.html">Empty page</a></li>
                        <li><a href="page-lockscreen.html">Lock-screen</a></li>
                        <li><a href="../../page-login.jsp">Login</a></li>
                        <li><a href="page-register.html">Register</a></li>
                        <li><a href="page-forget-password.html">Forget Password</a></li>
                        <li><a href="../../404.jsp">404</a></li>
                        <li><a href="page-gallery.html">Gallery</a></li>
                        <li><a href="page-timeline.html">Timeline</a></li>
                        <li><a href="page-invoice.html">Invoice</a></li>
                        <li><a href="page-profile.html">Profile</a></li>
                        <li><a href="page-calendar.html">Calendar</a></li>
                        <li><a href="page-chat-room.html">Chat room</a></li>
                        <li><a href="page-faqs.html">Faqs</a></li>
                        <li><a href="page-pricing.html">Pricing</a></li>
                        <li><a href="page-contacts.html">Contacts</a></li>
                        <li><a href="page-blog.html">Blog</a></li>
                        <li><a href="page-blog-article.html">Blog article</a></li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-folder-alt"></i> Nested menu
                        <span class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="javascript: void(0);">Level 1</a></li>
                        <li><a aria-expanded="true" href="javascript: void(0);">Level 2 <span
                                class="fa arrow"></span></a>
                            <ul aria-expanded="true" class="nav-third-level nav">
                                <li><a href="javascript: void(0);">Level 2</a></li>
                                <li><a href="javascript: void(0);">Level 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!--<li><a href="landing/home.html" target="_blank" class="bg-primary"><i class="icon-star"></i>Landing page</a></li>-->
            </ul>
        </div><!--nano content-->
    </div><!--nano scroll end-->
</aside>
<!--left navigation end-->


<!--main content start-->
<section class="main-content">


    <!--page header start-->
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>Tabs</h4>
            </div>
            <div class="col-sm-6 text-right">
                <ol class="breadcrumb">
                    <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                    <li>pages</li>
                    <li>Tabs</li>
                </ol>
            </div>
        </div>
    </div>
    <!--page header end-->


    <!--start page content-->

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Default Style
                </div>
                <div class="panel-body">
                    <div class="tabs">
                        <!-- Nav tabs -->
                        <ul class="list-inline tabs-nav" role="tablist">
                            <li class="active" role="presentation"><a aria-controls="home" data-toggle="tab"
                                                                      href="#home"
                                                                      role="tab">Home</a></li>
                            <li role="presentation"><a aria-controls="profile" data-toggle="tab" href="#profile"
                                                       role="tab">Profile</a></li>
                            <li role="presentation"><a aria-controls="messages" data-toggle="tab" href="#messages"
                                                       role="tab">Messages</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="home" role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta lacus ipsum,
                                tempus consequat turpis auctor sit amet. Pellentesque porta mollis nisi, pulvinar
                                convallis tellus tristique nec.
                                <br>
                                Nam aliquet consequat quam sit amet dignissim. Quisque vel massa est. Donec dictum nisl
                                dolor, ac malesuada tellus efficitur non. Pellentesque pellentesque odio neque, eget
                                imperdiet eros vehicula lacinia.
                            </div>
                            <div class="tab-pane" id="profile" role="tabpanel">
                                <h4>Heading</h4>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta lacus ipsum,
                                tempus consequat turpis auctor sit amet. Pellentesque porta mollis nisi, pulvinar
                                convallis tellus tristique nec.
                                <br>
                                Nam aliquet consequat quam sit amet dignissim. Quisque vel massa est. Donec dictum nisl
                                dolor, ac malesuada tellus efficitur non. Pellentesque pellentesque odio neque, eget
                                imperdiet eros vehicula lacinia.

                            </div>
                            <div class="tab-pane" id="messages" role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis laboriosam, vitae
                                ipsum tenetur atque vel repellendus culpa reiciendis velit quas, unde soluta quidem
                                voluptas ipsam, rerum fuga placeat rem error voluptate eligendi modi. Delectus, iure sit
                                impedit? Facere provident expedita itaque, magni, quas assumenda numquam eum! Sequi
                                deserunt, rerum.
                                <br>
                                <a href="#">Read More</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Bottom Tabs Style
                </div>
                <div class="panel-body">
                    <div class="tabs">

                        <div class="tab-content">
                            <div class="tab-pane active" id="t1" role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta lacus ipsum,
                                tempus consequat turpis auctor sit amet. Pellentesque porta mollis nisi, pulvinar
                                convallis tellus tristique nec.
                                <br>
                                Nam aliquet consequat quam sit amet dignissim. Quisque vel massa est. Donec dictum nisl
                                dolor, ac malesuada tellus efficitur non. Pellentesque pellentesque odio neque, eget
                                imperdiet eros vehicula lacinia.
                            </div>
                            <div class="tab-pane" id="t2" role="tabpanel">
                                <h4>Heading</h4>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta lacus ipsum,
                                tempus consequat turpis auctor sit amet. Pellentesque porta mollis nisi, pulvinar
                                convallis tellus tristique nec.
                                <br>
                                Nam aliquet consequat quam sit amet dignissim. Quisque vel massa est. Donec dictum nisl
                                dolor, ac malesuada tellus efficitur non. Pellentesque pellentesque odio neque, eget
                                imperdiet eros vehicula lacinia.

                            </div>
                            <div class="tab-pane" id="t3" role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis laboriosam, vitae
                                ipsum tenetur atque vel repellendus culpa reiciendis velit quas, unde soluta quidem
                                voluptas ipsam, rerum fuga placeat rem error voluptate eligendi modi. Delectus, iure sit
                                impedit? Facere provident expedita itaque, magni, quas assumenda numquam eum! Sequi
                                deserunt, rerum.
                                <br>
                                <a href="#">Read More</a>
                            </div>
                        </div>
                        <!-- Nav tabs -->
                        <ul class="list-inline tabs-nav tabs-bottom" role="tablist">
                            <li class="active" role="presentation"><a aria-controls="t1" data-toggle="tab" href="#t2"
                                                                      role="tab">Home</a></li>
                            <li role="presentation"><a aria-controls="t2" data-toggle="tab" href="#t2" role="tab">Profile</a>
                            </li>
                            <li role="presentation"><a aria-controls="t3" data-toggle="tab" href="#t3" role="tab">Messages</a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Left align
                </div>
                <div class="panel-body">
                    <div class="tabs left-tabs">
                        <!-- Nav tabs -->
                        <ul class="list-unstyled tabs-nav tabs-bottom" role="tablist">
                            <li class="active" role="presentation"><a aria-controls="t4" data-toggle="tab" href="#t4"
                                                                      role="tab">Home</a></li>
                            <li role="presentation"><a aria-controls="t5" data-toggle="tab" href="#t5" role="tab">Profile</a>
                            </li>
                            <li role="presentation"><a aria-controls="t6" data-toggle="tab" href="#t6" role="tab">Messages</a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="t4" role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta lacus ipsum,
                                tempus consequat turpis auctor sit amet. Pellentesque porta mollis nisi, pulvinar
                                convallis tellus tristique nec.
                                <br>
                                Nam aliquet consequat quam sit amet dignissim. Quisque vel massa est. Donec dictum nisl
                                dolor, ac malesuada tellus efficitur non. Pellentesque pellentesque odio neque, eget
                                imperdiet eros vehicula lacinia.
                            </div>
                            <div class="tab-pane" id="t5" role="tabpanel">
                                <h4>Heading</h4>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta lacus ipsum,
                                tempus consequat turpis auctor sit amet. Pellentesque porta mollis nisi, pulvinar
                                convallis tellus tristique nec.
                                <br>
                                Nam aliquet consequat quam sit amet dignissim. Quisque vel massa est. Donec dictum nisl
                                dolor, ac malesuada tellus efficitur non. Pellentesque pellentesque odio neque, eget
                                imperdiet eros vehicula lacinia.

                            </div>
                            <div class="tab-pane" id="t6" role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis laboriosam, vitae
                                ipsum tenetur atque vel repellendus culpa reiciendis velit quas, unde soluta quidem
                                voluptas ipsam, rerum fuga placeat rem error voluptate eligendi modi. Delectus, iure sit
                                impedit? Facere provident expedita itaque, magni, quas assumenda numquam eum! Sequi
                                deserunt, rerum.
                                <br>
                                <a href="#">Read More</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Right align
                </div>
                <div class="panel-body">
                    <div class="tabs right-tabs">
                        <!-- Nav tabs -->
                        <ul class="list-unstyled tabs-nav tabs-bottom" role="tablist">
                            <li class="active" role="presentation"><a aria-controls="t7" data-toggle="tab" href="#t7"
                                                                      role="tab">Home</a></li>
                            <li role="presentation"><a aria-controls="t8" data-toggle="tab" href="#t8" role="tab">Profile</a>
                            </li>
                            <li role="presentation"><a aria-controls="t9" data-toggle="tab" href="#t9" role="tab">Messages</a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="t7" role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta lacus ipsum,
                                tempus consequat turpis auctor sit amet. Pellentesque porta mollis nisi, pulvinar
                                convallis tellus tristique nec.
                                <br>
                                Nam aliquet consequat quam sit amet dignissim. Quisque vel massa est. Donec dictum nisl
                                dolor, ac malesuada tellus efficitur non. Pellentesque pellentesque odio neque, eget
                                imperdiet eros vehicula lacinia.
                            </div>
                            <div class="tab-pane" id="t8" role="tabpanel">
                                <h4>Heading</h4>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta lacus ipsum,
                                tempus consequat turpis auctor sit amet. Pellentesque porta mollis nisi, pulvinar
                                convallis tellus tristique nec.
                                <br>
                                Nam aliquet consequat quam sit amet dignissim. Quisque vel massa est. Donec dictum nisl
                                dolor, ac malesuada tellus efficitur non. Pellentesque pellentesque odio neque, eget
                                imperdiet eros vehicula lacinia.

                            </div>
                            <div class="tab-pane" id="t9" role="tabpanel">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos facilis laboriosam, vitae
                                ipsum tenetur atque vel repellendus culpa reiciendis velit quas, unde soluta quidem
                                voluptas ipsam, rerum fuga placeat rem error voluptate eligendi modi. Delectus, iure sit
                                impedit? Facere provident expedita itaque, magni, quas assumenda numquam eum! Sequi
                                deserunt, rerum.
                                <br>
                                <a href="#">Read More</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Accordions-->
    <div class="row">
        <div class="col-sm-6">
            <div class="panel-group accordion" id="accordion1">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-parent="#accordion1" data-toggle="collapse" href="#collapseOne"><i
                                class="icon mdi mdi-chevron-down"></i> Basic accordion</a>
                    </div>
                    <div class="panel-collapse collapse in" id="collapseOne">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
                            vestibulum quam. Pellentesque non feugiat neque, non volutpat orci. Integer ligula lacus,
                            ornare eget lobortis ut, molestie quis risus.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="collapsed" data-parent="#accordion1" data-toggle="collapse" href="#collapseTwo">
                            Collapsible Group Item #2</a>
                    </div>
                    <div class="panel-collapse collapse" id="collapseTwo">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
                            vestibulum quam. Pellentesque non feugiat neque, non volutpat orci. Integer ligula lacus,
                            ornare eget lobortis ut, molestie quis risus.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="collapsed" data-parent="#accordion1" data-toggle="collapse" href="#collapseThree">Collapsible
                            Group Item #3</a>
                    </div>
                    <div class="panel-collapse collapse" id="collapseThree">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
                            vestibulum quam. Pellentesque non feugiat neque, non volutpat orci. Integer ligula lacus,
                            ornare eget lobortis ut, molestie quis risus.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="collapsed" data-parent="#accordion1" data-toggle="collapse" href="#collapseFour">
                            Collapsible Group Item #4</a>
                    </div>
                    <div class="panel-collapse collapse" id="collapseFour">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
                            vestibulum quam. Pellentesque non feugiat neque, non volutpat orci. Integer ligula lacus,
                            ornare eget lobortis ut, molestie quis risus.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel-group accordion" id="accordion2">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <a data-parent="#accordion2" data-toggle="collapse" href="#collapse-1">Primary Color</a>
                    </div>
                    <div class="panel-collapse collapse in" id="collapse-1">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
                            vestibulum quam. Pellentesque non feugiat neque, non volutpat orci. Integer ligula lacus,
                            ornare eget lobortis ut, molestie quis risus.
                        </div>
                    </div>
                </div>
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <a class="collapsed" data-parent="#accordion2" data-toggle="collapse" href="#collapse-2">
                            Success Color</a>
                    </div>
                    <div class="panel-collapse collapse" id="collapse-2">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
                            vestibulum quam. Pellentesque non feugiat neque, non volutpat orci. Integer ligula lacus,
                            ornare eget lobortis ut, molestie quis risus.
                        </div>
                    </div>
                </div>
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <a class="collapsed" data-parent="#accordion2" data-toggle="collapse" href="#collapse-3">
                            Warning color</a>
                    </div>
                    <div class="panel-collapse collapse" id="collapse-3">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
                            vestibulum quam. Pellentesque non feugiat neque, non volutpat orci. Integer ligula lacus,
                            ornare eget lobortis ut, molestie quis risus.
                        </div>
                    </div>
                </div>
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <a class="collapsed" data-parent="#accordion2" data-toggle="collapse" href="#collapse-4"> Danger
                            Color </a>
                    </div>
                    <div class="panel-collapse collapse" id="collapse-4">
                        <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
                            vestibulum quam. Pellentesque non feugiat neque, non volutpat orci. Integer ligula lacus,
                            ornare eget lobortis ut, molestie quis risus.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end page content-->


    <!--Start footer-->
    <footer class="footer">
        <span>Copyright &copy; 2016. Float</span>
    </footer>
    <!--end footer-->

</section>
<!--end main content-->


<!--Common plugins-->
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/pace.min.js"></script>
<script src="../../static/js/jasny-bootstrap.min.js"></script>
<script src="../../static/js/jquery.slimscroll.min.js"></script>
<script src="../../static/js/jquery.nanoscroller.min.js"></script>
<script src="../../static/js/metismenu.min.js"></script>
<script src="../../static/js/float-custom.js"></script>
</body>
</html>